WordPressのプラグインなしでお問い合わせ作成｜Ajax使用

#Wordpress
WordPressのプラグインなしでお問い合わせ作成｜Ajax使用

クライアントからお問い合わせ処理をプラグインなしで作ってほしいとの依頼があったため、備忘録として記事にします。

サイトはWordPressで作成、jQueryとAjaxを利用してThanksページに移動しないようにし、送信が完了するとお問い合わせページ内で送信完了メッセージが表示されるようにしています。

リクエストの送信先のパスを指定する

まず、WordPressでAjaxを使用する場合には、

/wp-admin/admin-ajax.php

にリクエストを送らなければなりません。

JavaScript ファイル内で動的にパスを指定することはできないので、wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力します。

 JavaScript ファイルを bodyの最下部（</body>の直前）に配置することも一般的なので、wp_footer にフックしても大丈夫です。

以下がそのコードとなります。

functions.phpを編集するため、バックアップを取ってから編集作業を行ってください。

/**
 * ajax url
 */
function add_my_ajaxurl() {
    ?>
    <script>
        const ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
    <?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

もし、wp_footerにフックする場合には、

/**
 * ajax url
 */
function add_my_ajaxurl() {
    ?>
    <script>
        const ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
    <?php
}
add_action( 'wp_footer', 'add_my_ajaxurl', 1 );

としてください。

メールの送信設定

上記の設定が終わったら次はメールの送信設定になります。

この設定もfunctions.phpを編集します。

function set_mail_send() {
        mb_language("ja");
        mb_internal_encoding("utf-8");
        $name = $_REQUEST['user_name'];
        $email = $_REQUEST['user_email'];
        $send_email = '受信したいメールアドレス';


        $message_to_admin = <<<MAIL
下記の内容でお問い合わせをいただきました。

---------------------------------

【お名前】
{$_REQUEST['user_name']}

【電話番号】
{$_REQUEST['user_phone']}

【メールアドレス】
{$_REQUEST['user_email']}

【お問い合わせ内容】
{$_REQUEST['user_select']}

【ご希望連絡方法】
{$_REQUEST['select_contact']}

【ご住所】
〒：{$_REQUEST['user_postalcode']}

{$_REQUEST['user_pref']}{$_REQUEST['user_address']}

【メッセージ】
{$_REQUEST['user_message']}

MAIL;


        $message_to_customer = <<<EOD
{$_REQUEST['user_name']}様

自動返信内容

---------------------------------

【お名前】
{$_REQUEST['user_name']}

【電話番号】
{$_REQUEST['user_phone']}

【メールアドレス】
{$_REQUEST['user_email']}

【お問い合わせ内容】
{$_REQUEST['user_select']}

【ご希望連絡方法】
{$_REQUEST['select_contact']}

【ご住所】
〒：{$_REQUEST['user_postalcode']}

{$_REQUEST['user_pref']}{$_REQUEST['user_address']}

【メッセージ】
{$_REQUEST['user_message']}

EOD;

        wp_mail($send_email, $name . '様よりお問い合わせをいただきました', $message_to_admin, 'From: ' . $name . ' <' . $email . '>');
        wp_mail($email, 'お問い合わせ完了メール（自動返信）', $message_to_customer, 'From: 会社名・個人名  <メールアドレス>');


        echo '送信されました。';
        die();

}
add_action('wp_ajax_set_mail_send', 'set_mail_send');
add_action( 'wp_ajax_nopriv_set_mail_send', 'set_mail_send' );

一応中身の説明は行いますが、やりたいこと等で中身は変わると思いますので、あくまで参考程度にしてください。

会社・個人で受け取るメールの中身

お問い合わせがあった際に、会社・個人で受け取るメールの中身は以下となります。

$message_to_admin = <<<MAIL
下記の内容でお問い合わせをいただきました。

---------------------------------

【お名前】
{$_REQUEST['user_name']}

【電話番号】
{$_REQUEST['user_phone']}

【メールアドレス】
{$_REQUEST['user_email']}

【お問い合わせ内容】
{$_REQUEST['user_select']}

【ご希望連絡方法】
{$_REQUEST['select_contact']}

【ご住所】
〒：{$_REQUEST['user_postalcode']}

{$_REQUEST['user_pref']}{$_REQUEST['user_address']}

【メッセージ】
{$_REQUEST['user_message']}

MAIL;

編集したい場合には、<<<MAILとMAIL;の間を編集してください。

お問い合わせがあった際にのメールの中身を変数$message_to_adminに格納し、下の方に書きますメール送信処理に反映させます。

自動返信メールの中身

自動返信メールの中身は以下となります。

$message_to_customer = <<<EOD
{$_REQUEST['user_name']}様

本日、以下の内容でお問い合わせをいただきましたので、ご確認をお願い申し上げます。
後日、担当者より折り返しご連絡いたします。

---------------------------------

【お名前】
{$_REQUEST['user_name']}

【電話番号】
{$_REQUEST['user_phone']}

【メールアドレス】
{$_REQUEST['user_email']}

【お問い合わせ内容】
{$_REQUEST['user_select']}

【ご希望連絡方法】
{$_REQUEST['select_contact']}

【ご住所】
〒：{$_REQUEST['user_postalcode']}

{$_REQUEST['user_pref']}{$_REQUEST['user_address']}

【メッセージ】
{$_REQUEST['user_message']}

EOD;

編集したい場合には、<<<EODとEOD;の間を編集してください。

これも上記と同様に、自動返信メールの中身を変数$message_to_customerに格納し、下記のメール送信処理に反映させます。

メールの送信処理

wp_mailでメールを送信します。

wp_mailは

wp_mail(送信先メールアドレス, メールタイトル, メール本文, メールヘッダー, 添付ファイル)

です。メールヘッダーと添付ファイル部分は省略できます。

今回の処理部分は以下となります。

wp_mail($send_email, $name . '様よりお問い合わせをいただきました', $message_to_admin, 'From: ' . $name . ' <' . $email . '>');
wp_mail($email, 'お問い合わせ完了メール（自動返信）', $message_to_customer, 'From: 会社名・個人名  <メールアドレス>');

上がお問い合わせがあった際に受け取るメールの処理、下が自動返信メールの処理です。

この中の変数$name、$email、$send_emailは以下のものです。

function set_mail_send() {
        mb_language("ja");
        mb_internal_encoding("utf-8");
        $name = $_REQUEST['user_name'];
        $email = $_REQUEST['user_email'];
        $send_email = '受信したいメールアドレス';

長くなりましたが、以上でメールの送信設定ができました。

jQueryの設定

ここまできたらあとはFooterにjQueryで送信処理を書けば完了です。

以下はあくまでサンプルなので参考程度にしてください。

jQuery(function ($) {
        $('#request_form').submit(function (e) {
            e.preventDefault();
            let user_name = $('input[name="user_name"]').val(),
                user_phone = $('input[name="user_phone"]').val(),
                user_email = $('input[name="user_email"]').val(),
                user_select = $('[name="user_select"]:checked').val(),
                select_contact = $('[name="select_contact"]:checked').val(),
                user_postcode = $('input[name="user_postcode"]').val(),
                user_pref = $('[name="user_pref"] option:selected').val(),
                user_address = $('input[name="user_address"]').val(),
                user_message = $('textarea[name="user_message"]').val(),
                delete_form = document.getElementById('request_form').valueOf();

            $.ajax({
                type: 'POST',
                url: ajaxurl,
                data:{
                    'action' : 'set_mail_send',
                    'user_name' : user_name,
                    'user_phone' : user_phone,
                    'user_email' : user_email,
                    'user_select' : user_select,
                    'select_contact' : select_contact,
                    'user_postcode' : user_postcode,
                    'user_pref' : user_pref,
                    'user_address' : user_address,
                    'user_message' : user_message,
                },
                success: function(){
                    delete_form.remove();
                    $('.contactForm').html(
                        '<div class="text-center">'+
                        '<div class="alert alert-success" role="alert">'+
                        '<h4 class="alert-heading">送信が完了しました。</h4>'+
                        '<p class="mb-0">後日、担当者より折り返しご連絡いたします。</p>'+
                        '</div>'+
                        '</div>'
                    ).css('padding','0');
                    const destination = 220;
                    const speed = 400;
                    let position = $("html").offset().top + destination;
                    $('body,html').animate({ scrollTop: position }, speed, "linear");
                },
                error: function () {
                    $('#result').text('送信できませんでした。');
                }
            });
            return false;
        });
    });

以上で完了となります。